<template>
  <div class="about">
   
    <div class="topList">
      <router-link :to="{name:'japan'}" exact><div>日漫榜</div></router-link>
      <router-link :to="{name:'chinese'}"><div >国漫榜</div></router-link>
      <router-link :to="{name:'free'}"><div>免费榜</div></router-link>
      
    </div>
    <section>
    <router-view></router-view>
    </section>
  </div>
</template>
<script>

export default {
  name: "About",
  components: {

  },
  data(){
    return{
      num:0
    }
  }
};
</script>

<style lang="scss" scoped>
  *{
    padding: 0;
    margin: 0;
    text-decoration: none;
  }
  // .active{
  //   color: #ff5f8c;
  //     background-color: #ff5f8c14;
  //     border-radius: 14px;
  // }
.topList {
  display: flex;
  justify-content: space-around;
  align-content: center;
  a{
    div {
    font-size: 12px;
    height: 28px;
    // line-height: 28px;
    background-color: #eee;
    padding: 6px 18px;
    border-radius: 14px;
  }
    &.on {
      color: #ff5f8c;
      background-color: #ff5f8c14;
      border-radius: 14px;
    }
  }
  
}
</style>